Awesome Uploader (Ext JS Component)


This is a 3-in-1 uploader that uses Firefox 3.6+ / Chrome 5+ drag and drop, flash-based swfupload, or a standard HTML file upload field to give the best user experience possible for file uploads.

Features:

Multiple simultaneous uploads (via drag and drop and standard file upload only)
Progress bar (Drag and Drop and Flash based upload only)
Very extensible

The PHP required to handle these uploads (the same code that powers this page) is also included!

The Awesome Uploader detects if flash is available, using swfupload to allow a multiple file selection dialogue. If flash is not available a normal HTML file upload field is used.

Drag and drop uploads use XMLHttpRequest2 and the File API to send files as the raw body of the request. NOTE: This is different from standard multi-part form uploads!
SWFUpload and HTML file uploads use standard multi-part form uploads.

For all uploads, the server response should be a JSON object with a success property. If there is an error, there should also be an "error" property.
If all uploads succeed: {"success":true}
If an upload fails: {"success":false,"error":"Reason for error!"}
Upon failure, the "Reason for error!" part will be displayed in a message box.

If you are using firefox 3.6+ or Chrome 5+, drag a file from your desktop into here:



Configuration Options & Defaults

ConfigurationDefault ValueDescription
awesomeUploaderRoot""Path to all awesomeuploader resources. This is added to beginning of the path of all resources.
maxFileSizeBytes3145728 (3 MiB)Maximum file size in bytes
autoStartUploadfalseAuto start uploads as soon as a file is seleted.
alwaysShowFullFilePathfalseIf full file path is available, do not strip out the path. e.g. If file selected is "C:\FileToUpload.jpg" file name will be "FielToUpload.jpg"
supressPopupsfalseDo not show built-in Awesome Uploader popups like "This file is too big" or "Error uploading file".
allowDragAndDropAnywherefalseAllows dropping files anywhere onto the page.
extraPostData{ }Object of additional post data to send along with upload
NOTE: For drag and drop uploads, extraPostData only works in Firefox 3.6+, Chrome 6+.

WHY? multipart/form-data uploads (required to add additional parameters) requires the File API, which is only supported by Firefox 3.6+ & Chrome 6+.
xhrSendMultiPartFormDatafalseSend multipart/form-data uploads for drag and drop rather than sending the file as the entire request body. Only Firefox 3.6 compatible. See above note.
xhrFilePostName"Filedata"Name of post parameter for drag and drop file upload. Only used if xhrSendMultiPartFormData=true. See above note.
disableFlash22Disable flash based uploader (swfupload)
flashButtonHeight22Height of flash button
flashButtonWidth56Width of flash button
flashButtonSpriteawesomeUploaderRoot + "swfupload_browse_button_trans_56x22.PNG"Sprite used for flash button, contains 4 sections for normal, over, pressed, & disabled
flashUploadFilePostName"Filedata"POST variable name for flash name
flashSwfUploadPathawesomeUploaderRoot + "swfupload.swf"path to swfupload.swf file
flashSwfUploadFileTypes"*.*"File name mask for file types allowed by swfupload
flashSwfUploadFileTypesDescription"All Files"Description of above mask
flashUploadUrlawesomeUploaderRoot + "upload.php"URL that swfupload should send file to
gridWidth420grid width of file list
gridHeight200grid height of file list
standardUploadFilePostName"Filedata"POST variable name for standard uploader
standardUploadUrlawesomeUploaderRoot + "upload.php"URL that stanard file upload should send file to
standardButtonText"Browse..."URL that stanard file upload should send file to
xhrFileNameHeader"X-File-Name"Header name used to send file name for drag and drop (XHR2) upload
xhrExtraPostDataPrefix"extraPostData_"Header name used to send file name for drag and drop (XHR2) upload
xhrUploadUrlawesomeUploaderRoot + "xhrupload.php"URL that drag and drop (XHR2) upload should send file to


Events

fileselectedA file is selected. Returns file object. Return false to prevent this file from being queued.
Parameters: Object awesomeUploaderInstance, Object file
file will at minimum be:
file = {
name: fileName
,method: "swfupload" //(can be "swfupload", "standard", "dnd"
,id: 1 // a unique identifier to abort or remove an individual file, incrementing int
,status: "queued" // file status. will always be queued at this point
// if swfupload or dnd or standard upload on a modern browser (supports the FILE API) is used, size property will be set:
,size: 12345 // file size in bytes
}

Return false to prevent file from being queued!
fileselectionerrorA file was selected that is larger than the maxiumum allowed
Parameters: Object awesomeUploaderInstance, Object file
uploadstartUploading has started
Parameters: Object awesomeUploaderInstance, Object file
uploadprogressFor Flash + Drag and Drop uploads only! As the file is uploaded, progres events will come in for each file.
Parameters: Object awesomeUploaderInstance, Int fileId, bytesComplete, bytesTotal
fileId will match the id from the file object in the uploadstart event
uploadcompleteA file has finished uploading. Process the server result to see if it was successful. Return false if unsuccessful.
Parameters: Object awesomeUploaderInstance, Object file, String serverData, Object resultObject
serverData will contain the server response. Process it at this event to detemine if the upload was successful. If the upload filed, return false here. You can also set resultObject.error to a descriptive error that will be passed to the uploaderror event.
uploadremovedA file has been removed from the upload queue
Parameters: Object awesomeUploaderInstance, Object file
uploadabortedA file upload has been aborted while uploading
Parameters: Object awesomeUploaderInstance, Object file
uploaderrorAn error has occurred when upoading the file. Also fires when you return false from the uploadcomplete event
Parameters: Object awesomeUploaderInstance, Object file, Object resultObject
resultObject.error will contain the text you set in the uploadcomplete event

Released under BSD License



Awesome Uploader

Copyright (c) 2010, Andrew Rymarczyk
All rights reserved.

Redistribution and use in source and minified, compiled or otherwise obfuscated
form, with or without modification, are permitted provided that the following
conditions are met:

  * Redistributions of source code must retain the above copyright notice,
      this list of conditions and the following disclaimer.
  * Redistributions in minified, compiled or otherwise obfuscated form must
      reproduce the above copyright notice, this list of conditions and the
      following disclaimer in the documentation and/or other materials
      provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.